<!--
  文件描述：
  创建时间：2023/9/7 10:02
  创建人：二
-->
<template>
  <div class="container" ref="tableData">
    <m-loading
      class="main"
      :loading="loading">
      <el-table
        v-bind="$attrs"
        v-on="$listeners"
        :row-key="rowKey"
        border
        style="width: 100%;"
        :data="data"
        :max-height="tableMaxHeight"
        :header-cell-style="headerCellStyle"
      >
        <template v-for="item in columns">
          <MTableColumn
            v-if="item.children && item.children.length"
            :key="item.prop || item.type"
            :columns-header="item">

            <template v-for="(value, name) in $slots" #[name]>
              <slot :name="name" />
            </template>

            <template v-for="(value, name) in $scopedSlots" #[name]="{row, $index, column, isExpanded, isSelected, store, _self}">
              <slot
                :name="name"
                :row="row"
                :$index="$index"
                :column="column"
                :isExpanded="isExpanded"
                :isSelected="isSelected"
                :store="store"
                :_self="_self"
              />
            </template>
          </MTableColumn>

          <el-table-column
            v-else
            :key="item.prop || item.type"
            v-bind="item"
            :header-align="headerAlign(item.headerAlign)"
            show-overflow-tooltip>
            <!-- 表头插槽 -->
            <template
              v-if="item.slotHeaderName"
              v-slot:header="{ $index, column}">
              <slot
                :name="item['slotHeaderName']"
                :$index="$index"
                :column="column"
              >
              </slot>
            </template>

            <template
              v-if="item.slotName"
              v-slot="{row, $index, column, isExpanded, isSelected, store, _self}">
              <slot
                :name="item.slotName"
                :row="row"
                :$index="$index"
                :column="column"
                :isExpanded="isExpanded"
                :isSelected="isSelected"
                :store="store"
                :_self="_self"
              >
              </slot>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <m-pagination
        v-if="showPagination"
        v-bind="$attrs"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="total"
        @pagination-change="paginationChange"/>
    </m-loading>
  </div>
</template>

<script>
import MTableColumn from './MTableColumn'
export default {
  name: 'MTable',
  components: {
    MTableColumn
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    // 表格行数据的唯一键
    rowKey: {
      type: String,
      default: 'id'
    },
    // 列配置
    columns: {
      type: Array,
      default: () => []
    },
    // 表格最大高度是否设置
    maxHeight: {
      type: Number
    },
    // 表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 当前页数
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页显示数据个数
    pageSize: {
      type: Number,
      default: 10
    },
    // 总数据量
    total: {
      type: Number
    },
    // 显示分页选择器
    showPagination: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 元素高度
      height: 0
    }
  },
  computed: {
    // 表格最大高度
    tableMaxHeight() {
      if (!this.maxHeight) {
        // console.log('this.height',this.height,this.height-82)
        return this.height - 82;
      }
      return 500;
    }
  },
  // 组件挂载后
  mounted() {
    this.initHeight();
  },
  methods: {
    initHeight() {
      if(this.$refs.tableData.offsetHeight) {
        this.height = this.$refs.tableData.offsetHeight;
      }
    },
    // 表头对齐方式
    headerAlign(val) {
      let arr = ['left', 'center', 'right']
      return arr.includes(val) ? val : 'center'
    },
    // 表头单元格的 style 的回调方法
    headerCellStyle() {
      return {
        backgroundColor: '#F5F7FA'
      }
    },
    // 监听分页改变
    paginationChange({ currentPage, pageSize }) {
      this.$emit('update:pageSize', pageSize);
      this.$emit('update:currentPage', currentPage)
      this.$emit('pagination-change');
    }
  }
}
</script>

<style scoped>
  .container {
    width: 100%;
    flex: 1;
  }
  .main {
    background: #fff;
    padding: 15px;
  }
</style>
